import React, { Component } from 'react'
import constant from "../loan-setting/constant";
import { Button, Form, Input, InputNumber, message, Radio } from 'antd'
import { messages } from "share/common";
import periodDefineService from 'containers/finance-setting/period-define/period-define.service'
import InputLanguage from 'components/template/input-language'

class PeriodDefineRule extends Component {

  state = {
    saveLoading: false
  };

  handleSave = () => {
    this.props.form.validateFieldsAndScroll((err, value) => {
      if (!err) {
        const { record } = this.props.params, { close } = this.props;
        let i18n = value.periodSetName;
        value.periodSetName = i18n.name;
        value.i18n = {
          periodSetName: i18n.i18n
        };
        this.setState({ saveLoading: true });
        periodDefineService.savePeriodDefine(Object.assign(record, value)).then(() => {
          this.setState({ saveLoading: false }, () => {
            message.success(messages('common.operate.success')/*操作成功*/);
            close(true);
          });
        }).catch(e => {
          message.error(e.response.data.message);
          this.setState({ saveLoading: false });
        })
      }
    })
  };

  render() {
    const { formItemLayout } = constant;
    const { saveLoading } = this.state;
    const { close } = this.props, { record } = this.props.params;
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Form className={'new-form'}>
          <Form.Item
            label={messages('finance-5.key28')/*会计期间代码*/}
            {...formItemLayout}
            extra={messages('finance-5.key29')/*确定后不能修改*/}
          >
            {getFieldDecorator('periodSetCode',{
              rules: [
                { required: true, message: messages('common.please.input')/*请输入*/ },
                { max: 36, message: messages('common.max.characters.length',{arg1: 36})/*最多输入{arg1}个字符*/ },
                { pattern: '^[a-zA-Z0-9_]{1,}$', message: messages('finance-5.key30')/*只能输入字母,数字和下划线*/ }
              ],
              initialValue: record.periodSetCode
            })(
              <Input disabled={record.hasOwnProperty('id')} placeholder={messages('common.please.input')/*请输入*/}/>
            )}
          </Form.Item>
          <Form.Item
            label={messages('finance-5.key3')/*期间总数*/}
            {...formItemLayout}
            extra={messages('finance-5.key29')/*确定后不能修改*/}
          >
            {getFieldDecorator('totalPeriodNum', {
              rules: [{ required: true, message: messages('common.please.input')/*请输入*/ }],
              initialValue: record.totalPeriodNum || 12
            })(
              <InputNumber disabled={record.hasOwnProperty('id')} min={12} max={20} placeholder={messages('common.please.input')/*请输入*/}/>
            )}
          </Form.Item>
          <Form.Item
            label={messages('finance-5.key2')/*会计期名称*/}
            {...formItemLayout}
          >
            {getFieldDecorator('periodSetName', {
              rules: [{ required: true, message: messages('common.please.input')/*请输入*/ }],
              initialValue: { name: record.periodSetName, i18n: record.i18n ? record.i18n.periodSetName : [] }
            })(
              <InputLanguage
                placeholder={messages('common.max.characters.length',{arg1: 100})/*最多输入{arg1}个字符*/}
                maxLength={100}
              />
            )}
          </Form.Item>
          <Form.Item
            label={messages('finance-5.key4')/*名称附加*/}
            {...formItemLayout}
          >
            {getFieldDecorator('periodAdditionalFlag', {
              rules: [{
                required: true,
                message: messages('common.select')/*请选择*/
              }],
              initialValue: record.periodAdditionalFlag || 'P'
            })(
              <Radio.Group options={[
                { label: messages('finance-5.key5')/*附加前缀*/, value: 'P' },
                { label: messages('finance-5.key6')/*附加后缀*/, value: 'S' }
              ]}/>
            )}
          </Form.Item>
          <div className='footer-operate'>
            <Button type='primary' onClick={this.handleSave} loading={saveLoading}>{messages('common.ok')/*确定*/}</Button>
            <Button onClick={() => close()}>{messages('common.cancel')/*取消*/}</Button>
          </div>
        </Form>
      </div>
    )
  }

}

export default Form.create()(PeriodDefineRule);
